<template>
  <el-dialog :show-close="false" :visible.sync="innerVisible" destroy-on-close v-bind="$attrs" custom-class="page_dialog" @close="handleClose">
    <template slot="title">
      <div class="flex_space_between">
        <div class="page_dialog_title">{{ title }}</div>
        <el-button type="text" class="pub_button public_1EB398_btn closeIcon" @click="handleClose"><i class="el-icon-circle-close"></i> </el-button>
      </div>
    </template>
    <div class="page_main">
      <slot></slot>
    </div>
    <template #footer>
      <slot v-if="showFooter" name="footer">
        <span class="dialog-footer flex_end">
          <el-button type="text" class="public_e0e2e7_btn pub_button" @click="handleClose">{{ closeText }}</el-button>
          <el-button type="text" :class="[className]" class="pub_button" @click="submitBtnClick"> {{ submitText }} </el-button>
          <el-button v-if="showApply" type="text" class="public_danger_btn pub_button" @click="applyBtnClick"> 加速审批</el-button>
        </span>
      </slot>
    </template>
  </el-dialog>
</template>
<script>
export default {
  props: {
    title: { type: String, default: '提示' },
    dialogVisible: { type: Boolean, default: false },
    showApply: { type: Boolean, default: false },
    closeText: { type: String, default: '取消' },
    submitText: { type: String, default: '确定' },
    showFooter: { type: Boolean, default: true },
    className: { type: String, default: 'public_confirm_btn' }
  },
  data() {
    return {
      innerVisible: this.dialogVisible
    };
  },
  watch: {
    dialogVisible(newVal) {
      this.innerVisible = newVal;
    }
  },
  mounted() {},
  methods: {
    //关闭弹窗
    handleClose() {
      this.$emit('close');
    },
    submitBtnClick() {
      this.$emit('submit');
    },
    applyBtnClick() {
      this.$emit('apply');
    }
  }
};
</script>
<style lang="less" scoped>
.dialog-footer {
  width: 100%;
}
.page_main {
  width: 100%;
  overflow: hidden;
}
.closeIcon {
  font-size: 28px;
}
</style>
